<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Angular.js数据绑定</title>
  <script src="./angular/angular.js" type="text/javascript"></script>
  <script src="./js/jquery.min.js" type="text/javascript"></script>
  <script src="./bootstrap/js/bootstrap.js" type="text/javascript"></script>
  <link href="./bootstrap/css/bootstrap.css" rel="stylesheet" />
  <style type="text/css">
    th,td {
      text-align: center;
    }
  </style>
</head>
<!--设置ng-app和controller-->


<body ng-app="myApp" ng-controller="customersCtrl">
<!--沾满全屏container容器-->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <!--面板开始-->
      <div class="panel panel-primary">
        <!--面板标题/头部-->
        <div class="panel-heading">
          demo
        </div>
        <!--面板内容开始-->
        <div class="panel-body">
          <!--搜索工具栏开始-->
          <!--<div class="input-group col-md-2 pull-right">-->
          <!--<input type="text" placeholder="请输入要搜索的关键字" class="form-control" ng-model="id" />-->
          <!--<div class="input-group-btn">-->
          <!--<button type="button" class="btn btn-info">-->
          <!--搜索-->
          <!--<span class="glyphicon glyphicon-search"></span>-->
          <!--</button>-->
          <!--</div>-->
          <!--</div>-->
          <!--搜索工具栏结束-->
          <!--按钮工具栏开始-->
          <div class="btn-group pull-right">
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
                                <span class=" glyphicon glyphicon-plus">
                                </span>
              添加
            </button>
            <!--<button type="button" class="btn btn-primary" ng-click="deleteStu(x)">-->
            <!--<span class="glyphicon glyphicon-remove"></span>-->
            <!--删除-->
            <!--</button>-->
            <!--<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal" ng-click="editStu(x)">-->
            <!--<span class="glyphicon glyphicon-edit"></span> 编辑-->
            <!--</button>-->
          </div>
          <!--按钮工具栏结束-->
          <!--绑定表格开始-->
          <table id="tb" class="table table-striped table-bordered table-hover table-responsive">
            <tr>
              <!--表头，这只排序字段，-->
              <th><input type="checkbox" id="ck_all"/></th>
              <th>ID</th>
              <th>城市</th>
              <th >名称</th>
              <<th>编辑</th>
              <th>删除</th>
            </tr>
            <!--重复项开始，设置排序字段，数据源，result代表数据源，item表示result中遍历的每一个对象，id表示模糊搜索输入的内容，要与输入的input的ng-model一致，col表示排序名称，要与表头中一致-->
            <tr ng-repeat="item in result">
              <td><input type="checkbox" name="cbx" value="{{item.sh_id}}" ng-click="isSelected(item)"/></td>
              <td>{{item.sh_id}}</td>
              <td>{{item.sh_city}}</td>
              <td>{{item.sh_shool}}</td>
              <td>
                <button class="btn btn-default btn-sm" ng-click="editStu(item)" data-toggle="modal" data-target="#myModal">编辑</button>
              <td>
                <button class="btn btn-default btn-sm" ng-click="deleteStu(item.sh_id)">删除</button>
              </td>
            </tr>
          </table>
          <!--绑定表格结束-->
        </div>
        <!--面板内容开始-->
        <!-- Modal弹框内容 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <form class="col-md-12">
                  <span class="help-block col-md-2">城市id</span>
                  <div class="form-group col-md-10">
                    <input type="text" class="form-control" ng-model="currentStu.sh_city" />
                  </div>
                  <span class="help-block col-md-2">大学名称</span>
                  <div class="form-group col-md-10">
                    <input type="text" class="form-control" ng-model="currentStu.sh_shool" />
                  </div>
                </form>
                <button type="button" class="btn btn-info" data-dismiss="modal">
                  取消
                  <span class="glyphicon glyphicon-share-alt"></span>
                </button>
                <button type="button" class="btn btn-primary">
                  <span class="glyphicon glyphicon-saved" ng-click="addStu(currentStu)"></span>保存
                </button>
              </div>
            </div>
          </div>
        </div>
        <!--模态框弹窗-->
      </div>
      <!--面板结束-->
    </div>
  </div>
</div>
<!--占满全屏container容器-->
<!--引用AngularJS的controller文件-->
<script src="./js/app.js" type="text/javascript"></script>
</body>
</html>